<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../04过滤器和计算属性/bootstrap-3.3.7-dist/css/bootstrap.css">
    <title>留言板2</title>
</head>
<body>
   <div id="app">
        <publish  @senddata="receviceData"></publish>
        <div class="container">
            <h1>留言板</h1>
            <ul class="list-group">
                <li class="list-group-item" v-for="item in msgs" :key="item.id">
                    <p>
                        作者：{{item.author}}
                    </p>
                    <p>
                        内容：{{item.content}}
                    </p>
                </li>
            </ul>
        </div>
      
   </div> 

   <template id="publish">
       <div  class="container">
        <form>
            <div class="form-group">
              <label for="author">评论人：</label>
              <input v-model="author" type="text" class="form-control" id="author" placeholder="评论人">
            </div>
            <div class="form-group">
              <label for="content">内容：</label>
              <input v-model="content" type="text" class="form-control" id="content" placeholder="内容">
            </div>
            <button type="button" class="btn btn-default" @click.prevent="send">发布</button>
          </form>
       </div>
   </template>
</body>
<script src='../../vue文件/vue.js'></script>
<script>
    Vue.component('publish',{
        template:'#publish',
        data(){
            return {
                author:'',
                content:''
            }
        },
        methods:{
            send(){
                this.$emit('senddata',this.author,this.content)
                this.author=''
                this.content=''
            }
        }
    })






    let vm = new Vue({
        el: '#app',
        data: {
             msgs:[
                 {id:1,author:'张三',content:'你真棒。。。'},
                 {id:2,author:'李四',content:'你很优秀。。。'}
             ]
        },
        methods: {
            receviceData(author,content){
                console.log(author,content);
                this.msgs.unshift({
                    id:this.msgs.length+1,
                    author,
                    content
                })
            }
        }
    })
</script>
</html>